<template>
	<view class="page-view">
		<nav-view :defaultShow="true" ></nav-view>
		<view class="page-conte">
			<scroll-view class="scroll-view" scroll-y="true">
				<view class="title-h2">{{detail.article_title}}</view>
				<view class="info-box">
					<view class="p">案号:{{detail.case_number}}</view>
					<view class="p">审理法院: {{detail.court_name}}</view>
					<view class="p">案由:{{detail.cause_of_action}}</view>
					<view class="p">审理程序:{{detail.hearing_procedure}}</view>
					<view class="p">审判人员: {{detail.adjudicator}}</view>
					<view class="p">判决时间: {{detail.judgment_date}}</view>
				</view>
				<view class="info-box2">
					<view class="p p-title">当事人信息</view>
					<view class="p" v-html="detail.cases_party_info"></view>
					
					<view class="p p-title">基本事实</view>
					<view class="p" v-html="detail.brass_tacks"></view>
					
					<view class="p p-title">案情描述</view>
					<view class="p" v-html="detail.accident_description"></view>
					
					<view class="p p-title">法院认为</view>
					<view class="p" v-html="detail.court_think"></view>
					
					<view class="p p-title">判决结果</view>
					<view class="p" v-html="detail.result_of_judgment"></view>
					
					<view class="p p-title">审判人员</view>
					<view class="p" v-html="detail.assessing_officer"></view>
					
					<view class="p p-title">附录</view>
					<view class="p" v-html="detail.appendix"></view>
					
				</view>
			</scroll-view>
		</view>
		<!-- 目录菜单 -->
		<u-transition mode="slide-left" :show="isShowDirectory" duration="300" timingFunction="ease">
			<view class="directory-box">
				<view class="directory-left-box" :style="'padding-top:' + (statusBarHeight+55) + 'px'">
					<view class="title">目录</view>
					<view class="mune-list">
						<view class="mune-item" v-for="(item,index) in muneList">{{item.name}}</view>
					</view>
				</view>
				<img class="icon-back" src="@/static/images/icon-left.png" @click="touchBack" alt="">
			</view>
		</u-transition>
		
		
		
		<view class="tab-bar-box is-flex">
			<view class="tab-item is-flex" @click="showDirectory()" >
				<i class="t-icon t-icon-anli-mulu-01"></i>
				<text>目录</text>
			</view>
			<view class="tab-item is-flex" @click="handleCollect()">
				<i class="t-icon" :class="is_collect? 't-icon-anli-yishoucang-01' : 't-icon-anli-shoucang-01' "></i>
				<text>收藏</text>
			</view>
			<button class="tab-item tab-btn is-flex" id="shareBtn" open-type="share">
				<i class="t-icon t-icon-anli-fenxiang-01"></i>
				<text>转发</text>
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				tabBar:[
					{icon:'t-icon-anli-mulu-01',name:'目录',selectIcon:'t-icon-anli-mulu-01',selected:false},
					{icon:'t-icon-anli-shoucang-01',name:'收藏',selectIcon:'t-icon-anli-yishoucang-01',selected:false},
					{icon:'t-icon-anli-fenxiang-01',name:'转发',selectIcon:'t-icon-anli-fenxiang-01',selected:false}
				],
				isShowDirectory:false,
				muneList:[
					{id:0,name:'裁判日期'},
					{id:1,name:'当事人信息'},
					{id:2,name:'基本事实'},
					{id:3,name:'案情描述'},
					{id:4,name:'法院认为'},
					{id:5,name:'裁判结果'},
					{id:6,name:'审判人员'},
					{id:7,name:'附录'},
				],
				statusBarHeight: 0,
				case_id:0,
				detail:{},
				is_collect:false
			}
		},
		onLoad(e) {
			this.case_id = e.case_id;
			this.init();
		},
		created() {
			this.statusBarHeight = getApp().globalData.statusBarHeight
		},
		methods:{
			init(){
				let self = this;
				uni.showLoading({
					title: '加载中'
				});
				self.loading = true;
				let article_id = self.case_id;
				self._get(
					'cases.cases/detail',
					{
						article_id: article_id
					},
					function(res) {
						self.detail = res.data.detail;
						self.is_collect = res.data.is_collect;
						/*详情内容格式化*/
						// res.data.detail.article_content =utils.format_content(res.data.detail.article_content);
						// self.article = res.data.detail;
						self.loadding = true;
						uni.hideLoading();
					}
				);
			},
			showDirectory(){
				this.isShowDirectory = true
			},
			handleCollect(){
				let self = this;
				// uni.showLoading({
				// 	title: '加载中'
				// });
				// self.loading = true;
				let article_id = self.case_id;
				self._get(
					'cases.cases/handleCollect',
					{
						article_id: article_id,
						type:2
					},
					function(res) {
						self.is_collect = res.data.is_collect;
						// self.loadding = true;
						// uni.hideLoading();
					}
				);
			},
			touchTab(item,index){
				if(index == 0) {
					// 目录
					this.isShowDirectory = true
				} else if(index == 1) {
					// 搜藏
					this.tabBar[index].selected = !this.tabBar[index].selected
				}  else if(index == 2) {
					// 转发
					
				} 
			},
			touchBack(){
				this.isShowDirectory = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;

	}

	.page-view {
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.page-conte {
		// height: 100%;
		flex: 1;
	}

	.scroll-view {
		height: 100%;
		padding: 20upx 40upx;
		box-sizing: border-box;
	}

	.title-h2 {
		font-size: 45rpx;
		font-family: Source Han Sans CN-Bold, Source Han Sans CN;
		font-weight: bold;
		color: #001353;
		line-height: 67rpx;
	}

	.info-box {
		margin-top: 40upx;
		font-size: 27rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		color: #999999;
	}

	.info-box .p {
		padding: 10rpx 0 0;
	}
	.p-title{
		margin-top: 20rpx;
	}

	.info-box2 {
		font-size: 27rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		color: #333333;
	}

	.info-box2 .p {
		padding: 10rpx 0;
		line-height: 50rpx;
	}
	.tab-bar-box {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		background: #FFFFFF;
		box-shadow: 0rpx -4rpx 8rpx 1rpx rgba(0,0,0,0.16);
		padding-bottom: calc(0rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(0rpx + env(safe-area-inset-bottom));
	}
	.tab-bar-box .tab-item {
		width: 33.333333%;
		justify-content: center;
		height: 100rpx;
		border: none;
		background-color: #fff;
	}
	.tab-item .t-icon {
		width: 46rpx;
		height: 46rpx;
		margin-right: 10rpx;
	}
	.tab-item::after {
		display: none;
	}
	
	// 目录
	.directory-box {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 9999;
		background-color: rgba(0,0,0,0.7);
	}
	.directory-left-box {
		height: 100%;
		width: 500rpx;
		background-color: #fff;
		padding: 40upx;
	}
	.directory-left-box .title {
		font-size: 40rpx;
		font-family: Source Han Sans CN-Bold, Source Han Sans CN;
		font-weight: bold;
		color: #333333;
	}
	.mune-list {
		margin-top: 10rpx;
	}
	.mune-item {
		padding: 40upx 0;
		border-bottom:1rpx solid #EDEDED;
		font-size: 32rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		color: #333333;
	}
	.icon-back {
		position: absolute;
		right: 122rpx;
		top: 50%;
		transform: translateY(-50%);
		width: 46rpx;
		height: 42rpx;
		z-index: 99;
	}
	.tab-bar-box .u-button {
		width: auto !important;
	}
	
</style>
